<template>
  <h2>白名单</h2>
  <div class="create">
    <select v-model="type">
      <option value="EXACT">精确邮箱</option>
      <option value="DOMAIN">域名</option>
      <option value="REGEX">正则</option>
    </select>
    <input v-model="rule" placeholder="例如 user@xx.com 或 example.com 或 ^.+@qq\\.com$" />
    <label><input type="checkbox" v-model="enabled" /> 启用</label>
    <button @click="add">新增</button>
  </div>
  <table class="table">
    <thead><tr><th>类型</th><th>规则</th><th>启用</th><th>操作</th></tr></thead>
    <tbody>
    <tr v-for="r in list" :key="r.id">
      <td>{{ r.type }}</td>
      <td>{{ r.rule }}</td>
      <td>{{ r.enabled ? '是':'否' }}</td>
      <td>
        <button @click="toggle(r)">{{ r.enabled ? '禁用':'启用' }}</button>
        <button @click="del(r)">删除</button>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
export default { name: 'AccountWhitelist' }
</script>

<script setup>
import { ref, onMounted } from 'vue'
import { accountApi } from '@/api/account'
const list=ref([]), type=ref('EXACT'), rule=ref(''), enabled=ref(true)
const load=async()=>{ list.value = await accountApi.listWhitelist() }
const add=async()=>{ if(!rule.value) return
  await accountApi.addWhitelist({type:type.value, rule:rule.value, enabled:enabled.value})
  rule.value=''; await load()
}
const toggle=async(r)=>{ await accountApi.updWhitelist(r.id, {type:r.type, rule:r.rule, enabled:!r.enabled}); await load() }
const del=async(r)=>{ await accountApi.delWhitelist(r.id); await load() }
onMounted(load)
</script>
<style scoped>
.create{display:flex;gap:8px;align-items:center;margin-bottom:12px}
input,select{background:#f7f8fb;border:1px solid #e5e7eb;border-radius:8px;padding:6px 8px}
button{padding:6px 10px;border:1px solid #409eff;background:#409eff;color:#fff;border-radius:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #eee;padding:8px}
</style>
